<!--
 * @Date: 2024-09-13 14:29:54
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-18 17:21:34
 * @Description: 
-->
<template>
  <div class="icon-sheet-panel">
    <el-scrollbar>
      <div class="icon-list" v-if="iconList.length > 0">
        <div 
          :class="[ 'icon-item', activeIcon === item.fontClass ? 'active' : '' ]"
          v-for="(item, index) in iconList" :key="index"
          @click="onIconItemkClick(item, index)"
        >
          <VfIcon :name="item?.fontClass"></VfIcon>
        </div>
      </div>
      <el-empty v-else :="emptyAttrs"></el-empty>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue';

const emits = defineEmits([
  'onSeleted'
])
const props = defineProps({
  // 数据集
  list: { type: Array, default: () => { return [] } },
  // 选中的图标
  activeIcon: { type: String, default: '' },
  // 搜索的图标
  searchIcon: { type: String, default: '' }
})

// 图标数据集
const iconList = computed(() => {
  const { searchIcon } = props
  if (searchIcon) {
    let search = searchIcon.trim().toLowerCase();
    return props.list.filter(item => item.fontClass.toLowerCase().indexOf(search) !== -1)
  } else {
    return props.list
  }
})

// 栅格的数据集
const gridState = reactive({
  rowAttrs: {
    gutter: 10
  },
  colAttrs: {
    xs: 6,
    sm: 4,
    lg: 4,
  }
})
// 空内容的属性
const emptyAttrs = reactive({
  imageSize: 100,
  description: '暂无内容'
})
/**
 * 图标点击触发
 * 
 * @param item 点击的图标信息
 */
const onIconItemkClick = (item) => {
  emits('onSeleted', item.fontClass, item)
}

</script>

<style lang="scss" scoped>
.icon-sheet-panel {
  height: 230px;
  overflow: hidden;
  margin: 8px 0;
  .icon-list {
    display: grid;
    padding-left: 8px;
    padding-right: 8px;
    gap: .5rem;
    grid-template-columns: repeat(6, 1fr);
  }
  .icon-item {
    display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid var(--el-border-color);
		border-radius: 5px;
		padding: 5px;
    height: 30px;
    cursor: pointer;
    &:hover, &.active {
      background-color: var(--el-color-primary-light-9);
			border: 1px solid var(--el-color-primary-light-5);
      i {
				color: var(--el-color-primary);
			}
    }
  }
}
</style>